<template>
	<view class="page">
		<view class="page-wrap">
			<view class="page-inner">

				<!-- 分享海报 -->
				<l-painter css="width: 750rpx;padding: 32rpx; margin: 0 auto; background: #f9f9f9;box-sizing: border-box;"
					@fail="fail" pathType="url" ref="share_poster">
					<l-painter-view css="background:#F5F7F9;">
						<!-- 顶部标题 -->
						<l-painter-view css="background:#F5F7F9;margin-top:70rpx;text-align:center;">
							<l-painter-text text="邀请好友加入 NUOCHE"
								css="text-align:center;font-size: 48rpx;font-weight: bold;color: #333333;">
							</l-painter-text>
							<l-painter-text text="邀请好友购买商品，赚取相应佣金"
								css="margin-top: 16rpx;text-align:center;font-size: 24rpx;color: #999999;">
							</l-painter-text>
						</l-painter-view>
						<!--  -->
						<!-- 中间logo 二维码 -->
						<l-painter-view
							css="background:#FFFFFF;margin-top:80rpx;padding-top: 110rpx;padding-bottom: 70rpx;text-align:center;">
							<l-painter-image :src="image_title" css="width:600rpx;height:70rpx;" />
							<l-painter-text text="保护你的隐私  拒绝骚扰"
								css="margin-top: 60rpx;margin-bottom: 60rpx;text-align:center;font-size: 24rpx;color: #999999;">
							</l-painter-text>

							<l-painter-image :src="image_code" css="display:block;width:300rpx;height:300rpx;margin:0 auto;" />

						</l-painter-view>
						<!--  -->
					</l-painter-view>
				</l-painter>
				<!-- 分享海报 -->

				<view class="save-box" @click="share_poster_save()">
					<view class="text">
						保存图片
					</view>
				</view>
				<!--  -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image_title: require('@/static/imgs/invite/yq-logo.png'),
				image_code: '',
			}
		},
		computed: {

		},
		onLoad(options) {
			this.queryUserPoster();
		},

		onShow() {
			this.$log('配置', {
				...this.vuex_config
			})
		},
		methods: {
			queryUserPoster() {
				
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'getShareCode',
					},
				}).then(res => {
					console.log('用户分享二维码', res)
					if (res.code == 200) {
						this.image_code = res.data
						console.log('邀请二维码', this.image_code)
					}
				});
			},
			share_poster_save() {
				this.$refs.share_poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath)
						this.picture2 = res.tempFilePath

						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功',
									duration: 4000
								})
							},
							fail() {
								// uni.hideLoading()
							}
						});
					}
				})
			},
		}
	}
</script>


<style lang="less">
	.page {
		.page-wrap {
			padding: 0;
			height: 100%;
			box-sizing: border-box;
			background-color: #f9f9f9;
			background: #F5F7F9;
			display: flex;
			justify-content: center;
		}

		.save-box {
			margin-top: 60rpx;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			background: #FFFFFF;

			.save {
				display: block;
				margin: 40rpx auto 19rpx;
				width: 78rpx;
				height: 78rpx;
			}

			.text {
				font-size: 28rpx;
				color: #222222;
				text-align: center;
			}
		}
	}
</style>